/**
 * 象棋棋盘样式
 */

.chess-board-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, #F5DEB3 0%, #DEB887 100%);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.board-wrapper {
  position: relative;
  background: #FAEBD7;
  padding: 20px;
  border-radius: 8px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 主棋盘 */
.chess-board {
  position: relative;
  background: #FAEBD7;
  width: 630px;  /* 9列 × 70px */
  height: 700px; /* 10行 × 70px */
  
  /* 使用背景图绘制所有线条 */
  background-image:
    /* 最外层边框线（加粗3px） - 顶部 */
    linear-gradient(to right, transparent 0, transparent 35px, #5D4037 35px, #5D4037 595px, transparent 595px),
    /* 最外层边框线（加粗3px） - 底部 */
    linear-gradient(to right, transparent 0, transparent 35px, #5D4037 35px, #5D4037 595px, transparent 595px),
    /* 最外层边框线（加粗3px） - 左侧 */
    linear-gradient(to bottom, transparent 0, transparent 35px, #5D4037 35px, #5D4037 665px, transparent 665px),
    /* 最外层边框线（加粗3px） - 右侧 */
    linear-gradient(to bottom, transparent 0, transparent 35px, #5D4037 35px, #5D4037 665px, transparent 665px),
    /* 内部横线（8条，2px） */
    linear-gradient(to right, transparent 0, transparent 35px, #8B4513 35px, #8B4513 595px, transparent 595px),
    linear-gradient(to right, transparent 0, transparent 35px, #8B4513 35px, #8B4513 595px, transparent 595px),
    linear-gradient(to right, transparent 0, transparent 35px, #8B4513 35px, #8B4513 595px, transparent 595px),
    linear-gradient(to right, transparent 0, transparent 35px, #8B4513 35px, #8B4513 595px, transparent 595px),
    linear-gradient(to right, transparent 0, transparent 35px, #8B4513 35px, #8B4513 595px, transparent 595px),
    linear-gradient(to right, transparent 0, transparent 35px, #8B4513 35px, #8B4513 595px, transparent 595px),
    linear-gradient(to right, transparent 0, transparent 35px, #8B4513 35px, #8B4513 595px, transparent 595px),
    linear-gradient(to right, transparent 0, transparent 35px, #8B4513 35px, #8B4513 595px, transparent 595px),
    /* 中间竖线 - 上半部分（x=105,175,245,315,385,455,525），从y=35到y=315 */
    linear-gradient(to bottom, transparent 0, transparent 35px, #8B4513 35px, #8B4513 315px, transparent 315px),
    linear-gradient(to bottom, transparent 0, transparent 35px, #8B4513 35px, #8B4513 315px, transparent 315px),
    linear-gradient(to bottom, transparent 0, transparent 35px, #8B4513 35px, #8B4513 315px, transparent 315px),
    linear-gradient(to bottom, transparent 0, transparent 35px, #8B4513 35px, #8B4513 315px, transparent 315px),
    linear-gradient(to bottom, transparent 0, transparent 35px, #8B4513 35px, #8B4513 315px, transparent 315px),
    linear-gradient(to bottom, transparent 0, transparent 35px, #8B4513 35px, #8B4513 315px, transparent 315px),
    linear-gradient(to bottom, transparent 0, transparent 35px, #8B4513 35px, #8B4513 315px, transparent 315px),
    /* 中间竖线 - 下半部分（x=105,175,245,315,385,455,525），从y=385到y=665 */
    linear-gradient(to bottom, transparent 0, transparent 385px, #8B4513 385px, #8B4513 665px, transparent 665px),
    linear-gradient(to bottom, transparent 0, transparent 385px, #8B4513 385px, #8B4513 665px, transparent 665px),
    linear-gradient(to bottom, transparent 0, transparent 385px, #8B4513 385px, #8B4513 665px, transparent 665px),
    linear-gradient(to bottom, transparent 0, transparent 385px, #8B4513 385px, #8B4513 665px, transparent 665px),
    linear-gradient(to bottom, transparent 0, transparent 385px, #8B4513 385px, #8B4513 665px, transparent 665px),
    linear-gradient(to bottom, transparent 0, transparent 385px, #8B4513 385px, #8B4513 665px, transparent 665px),
    linear-gradient(to bottom, transparent 0, transparent 385px, #8B4513 385px, #8B4513 665px, transparent 665px);
  background-size:
    /* 外边框（加粗3px） */
    100% 3px, 100% 3px, 3px 100%, 3px 100%,
    /* 内部横线 - 2px高度 */
    100% 2px, 100% 2px, 100% 2px, 100% 2px, 100% 2px, 100% 2px, 100% 2px, 100% 2px,
    /* 上半竖线 - 2px宽度 */
    2px 100%, 2px 100%, 2px 100%, 2px 100%, 2px 100%, 2px 100%, 2px 100%,
    /* 下半竖线 - 2px宽度 */
    2px 100%, 2px 100%, 2px 100%, 2px 100%, 2px 100%, 2px 100%, 2px 100%;
  background-position:
    /* 外边框位置 */
    0 35px, 0 665px, 35px 0, 595px 0,
    /* 内部横线位置：y=105,175,245,315,385,455,525,595 */
    0 105px, 0 175px, 0 245px, 0 315px, 0 385px, 0 455px, 0 525px, 0 595px,
    /* 上半竖线：x=105,175,245,315,385,455,525 */
    105px 0, 175px 0, 245px 0, 315px 0, 385px 0, 455px 0, 525px 0,
    /* 下半竖线：x=105,175,245,315,385,455,525 */
    105px 0, 175px 0, 245px 0, 315px 0, 385px 0, 455px 0, 525px 0;
  background-repeat: no-repeat;
}

/* 九宫格斜线容器 */
.chess-board::before,
.chess-board::after {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  background-image:
    linear-gradient(45deg, transparent 49%, #8B4513 49.5%, #8B4513 50.5%, transparent 51%),
    linear-gradient(-45deg, transparent 49%, #8B4513 49.5%, #8B4513 50.5%, transparent 51%);
  pointer-events: none;
  z-index: 1;
}

.chess-board::after {
  /* 黑方九宫格：列3-5，行0-2（x=245-385, y=35-175） */
  top: 35px;
  left: 245px;
}

.chess-board::before {
  /* 红方九宫格：列3-5，行7-9（x=245-385, y=525-665） */
  top: 525px;
  left: 245px;
}

.chess-row {
  display: flex;
}

/* 河界区域 - 突出分界线效果 */
.river-divider {
  position: absolute;
  top: 50%;
  left: 35px;
  right: 35px;
  transform: translateY(-50%);
  height: 70px;
  background: linear-gradient(to bottom,
    rgba(176, 196, 222, 0.15) 0%,
    rgba(176, 196, 222, 0.25) 50%,
    rgba(176, 196, 222, 0.15) 100%
  );
  display: flex;
  justify-content: space-around;
  align-items: center;
  pointer-events: none;
  z-index: 10;
}

.river-text {
  font-size: 28px;
  font-weight: 900;
  font-family: 'KaiTi', '楷体', 'STKaiti', '华文楷体', 'SimSun', '宋体', serif;
  color: #2F4F4F;
  text-shadow: 
    1px 1px 2px rgba(255,255,255,0.8),
    2px 2px 4px rgba(0,0,0,0.3);
  letter-spacing: 6px;
  /* 去掉所有按钮样式，只保留纯文字 */
  background: none;
  border: none;
  padding: 0;
  box-shadow: none;
  transform: none;
  transition: none;
  position: relative;
  z-index: 15;
  opacity: 0.9;
}

.river-text:first-child {
  margin-right: 20px;
}

.river-text:last-child {
  margin-left: 20px;
}

/* 状态信息 */
.board-status {
  display: flex;
  gap: 20px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  border: 2px solid #8B4513;
  font-size: 16px;
}

.status-label {
  font-weight: bold;
  color: #5D4E37;
}

.status-value {
  color: #8B4513;
}

.player-red {
  color: #DC143C;
  font-weight: bold;
}

.player-black {
  color: #2F4F4F;
  font-weight: bold;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chess-board-container {
    padding: 10px;
  }
  
  .board-wrapper {
    padding: 10px;
  }
  
  .board-status {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

/* 禁用状态 */
.chess-board-container.disabled {
  opacity: 0.7;
  pointer-events: none;
}
